import { createApp, reactive, ref } from 'vue'

import myLoad from './myLoad/myLoad'
// console.log(myLoad);
let prop = reactive({
    show: false,
    msg: ''
})
// let show = ref(false)
// 这里将myLoad组件挂载在一个自己创建的div标签上
let $load = createApp(myLoad, {prop}).mount(document.createElement('div'))

// console.log($load);
// 接下来需要给$load添加显示和隐藏的方法
const $loading = {
    show(msg) { // 控制loading显示的方法
        // console.log(msg);
        prop.show = true
        // console.log(prop);
        prop.msg = msg
        document.body.appendChild($load.$el)
    },

    hide() { // 控制loading隐藏的方法
        prop.show = false
    }
}

export default {
    // install 当createApp调用use方法的时候回自定触发
    install(app) {
        // console.log(app);
        // Vue.prototype.aaa = '122'
        // Vue.prototype.$http = axios
        app.config.globalProperties.$loading = $loading
    }
}